<template>
  <div class="listWrap">
    
    
    <div v-show="!$route.query.subCategoryId">
      <div class="header">
      <div class="logoWraap">
        <span class="logo"></span>
      </div>
      <input
        type="text"
        placeholder="搜索商品"
        placeholder-class="placeholder"
        @click="$router.push('/search')"
      />
      <van-button plain class="btn">登录</van-button>
    </div>
      <!-- tab导航 -->
      <navType ref="nav1" />

      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
        <van-swipe-item
          :key="index"
          v-for="(banner, index) in currentCategory1.bannerList"
        >
          <img :src="banner.picUrl" width="100%" height="100%" />
        </van-swipe-item>
      </van-swipe>

      <!-- 商品列表 -->
      <div class="goodsContainer">
        <div
          class="goods_list"
          :key="index"
          v-for="(categoryItem, index) in categoryItemList"
        >
          <div class="goods_cate_title">
            <p>{{ categoryItem.category.name }}</p>
            <p class="sub_title">{{ categoryItem.category.frontName }}</p>
          </div>

          <GoodsList :itemList="categoryItem.itemList" />
        </div>
      </div>
    </div>

    <div v-show="$route.query.subCategoryId">
      <!-- 顶部 -->
      <Top />
      <NavType2 ref="nav2" :categoryL2List="categoryL2List2" style="margin-bottom: 20px" />
      <GoodsList :itemList="categoryItems.itemList" />
    </div>
  </div>
</template>

<script>
import GoodsList from "../goodsList";
import { mapGetters } from "vuex";
import NavType2 from "../navType2";
export default {
  name: "List",
  components: {
    GoodsList,
    NavType2,
  },
  data() {
    return {};
  },
  created() {
    // console.log(this.$route);
    // return
  },
  computed: {
    ...mapGetters([
      "currentCategory1",
      "categoryItemList",
      "categoryL2List2",
      "categoryItems",
    ]),
  },
  methods: {
    getData() {
      if (this.$route.query.subCategoryId) {
        this.$store.dispatch("getGoodsByCateIdAndBySubId", {
          categoryId: this.$route.query.categoryId,
          subCategoryId: this.$route.query.subCategoryId,
        });
        

          this.$refs.nav2.updateNavId(this.$route.query.subCategoryId)
        
      } else if(this.$route.query.categoryId){
        
        this.$store.dispatch("getGoodsByCateId", this.$route.query.categoryId);
        
          this.$refs.nav1.updateNavId(this.$route.query.categoryId)
        
      }
    },
  },
  watch: {
    $route(route) {
      // console.log(222);
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>

.header {
  display: flex;
  margin: 10px 0;
  padding: 10px;
  .logoWraap {
    padding-top: 10px;
    .logo {
      display: block;
      width: 60px;
      height: 20px;
      background: url(~@/assets/logo2.png);
      background-size: 3.76rem 3.76rem;
      background-position: -1rem -2.4rem;
    }
  }

  input {
    height: 30px;
    width: 70%;
    margin: 0 10px;
    &::-webkit-input-placeholder {
      font-size: 15px;
    }
  }
  .btn {
    height: 35px;
    border: 1px solid red;
    width: 70px;
    color: red;
  }
}
.my-swipe .van-swipe-item {
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
.listWrap {
  background-color: #eee;
}
.goodsContainer {
  // margin: 10px 0;
  // padding: 10px 0;

  .goods_list {
    background: white;
    .goods_cate_title {
      text-align: center;
      margin: 10px 0;
      padding: 10px 0;
      .sub_title {
        color: #999;
        font-size: 15px;
        margin-top: 10px;
      }
    }
  }
}
</style>